<template>
  <el-dialog v-model="state.isFalse" :title="title" :before-close="onVisable" :draggable="true" :width="850">
    <div class="ww100 h100x5 flex-col white">
      <div class="flex-ec flex1 h32 mb20">
        <div>时间范围</div>
        <div class="flex w50x7 mlr10">
          <el-date-picker v-model="state.datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
        <el-button class="bgi3 white" @click.stop="state.page = 1; init()" :icon="Search">搜索</el-button>
      </div>
      <div class="row bgi22">
        <div :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i" v-show="v.show" :class="typeof(v.key) == 'object'?v.width +' '+ 'mlr5':v.width">{{v.name}}</div>
      </div>
      <div class="table">
        <div class="row" :class="index%2 == 1?'bgi23':'bgi18'" v-for="(item, index) in state.list" :key="index" @click="handleClick('active', item)">
          <div v-show="v.show" :class="v.width" :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i">
            <span v-if="typeof(v.key) == 'object'" class="i21 cursor mlr5" :class="kk=='add'?'none':kk=='deal'&&item['clear_type']!=0?'none':''" v-for="(vv, kk, ii) in v.key" :key="ii" @click.stop="handleClick(kk, item)">{{vv}}</span>
            <span v-else-if="v.key=='*'">{{index+1}}</span>
            <span v-else-if="v.type == 'time'">{{item[v.key] == 0?'/':parseTime(item[v.key])}}</span>
            <span v-else-if="v.type == 'find'" :class="find(v.value[0], [v.value[1], item[v.key]], 'color')?find(v.value[0], [v.value[1], item[v.key]], 'color'):''">
              {{find(v.value[0], [v.value[1], item[v.key]], v.value[2])}}
            </span>
            <span v-else-if="v.type == 'switch'">
              <el-switch v-model="item[v.key]" :active-text="v.value[1].name" :inactive-text="v.value[0].name" :active-value="v.value[1].value" :inactive-value="v.value[0].value" inline-prompt @change="handleClick('switch', item)"></el-switch>
            </span>
            <span v-else-if="v.type == 'input'"><el-input v-model="item[v.value]" placeholder="请输入" style="width: 150px;" size="small" /></span>
            <span v-else>{{isNull(item[v.key]) && v.key!=''? '/' : item[v.key]}}</span>
          </div>
        </div>
        <div v-if="state.empty" class="flex-cc ww100 tc ptb13 bgi18">没有数据</div>
      </div>
      <Pagination class="plr20" v-show="state.total>0" :total="state.total" v-model:page.sync="state.page" v-model:limit.sync="state.limit" @pagination="init" />
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { Search } from '@element-plus/icons-vue'
  import Pagination from '@/components/Pagination'
  const { proxy }:any = getCurrentInstance()
  const publicStore = proxy.publicStore()
  const configStore = proxy.configStore()
  const state = reactive({
	  ...publicStore.$state,
    content: [
      { width: 'w70',   show: true, align: 'center', key: '*', name: '序号' },
      { width: 'w50x5', show: true, align: 'start', key: 'timestamp', name: '时间', type: 'time' }, 
      { width: 'flex1', show: true, align: 'start', key: 'value', name: '测量值' },
    ],
  })
  const props = defineProps({
    title: {
      type: String,
      default: ()=>{return {}}
    },
  })
  const emit = defineEmits(['init'])

  // 打开关闭弹窗
  const onVisable = async (val) => {
    state.isFalse = !state.isFalse
    if(!state.isFalse) return
    state.form = Object.assign({},  val)
    state.page = 1
    init()
  }

  const init = async () => {
    state.query = {"o": "o_sensor_measure_int", "p": [state.form.sensor_id, "isAlarm"], "i": -1,}
    if(!proxy.isNull(state.datetime)){
      let start = Date.parse(state.datetime[0]) + ''
      let end = Date.parse(state.datetime[1]) + ''
      state.query.p = [state.form.sensor_id, "isAlarm", start, end]
      state.query.i = 3
    }
    state.params = {queryApi: Object.assign({s: (state.page -1)*state.limit, n: state.limit}, state.query), queryApiCount: state.query}
    let res = await publicStore.post(state.params)
    state.list = proxy.isNull(res.queryApi)? [] : res.queryApi
    state.empty = proxy.isNull(res.queryApi)? true : false
    state.total = proxy.isNull(res.queryApiCount)? 0 : parseInt(res.queryApiCount[0].count)
  }

    // 检索条件
  const getQuery  = () => {
    if(!state.sensor_id && proxy.isNull(state.datetime)){
      state.query.p = [publicStore.distributId, state.form.type]
      state.query.i = 16
    }
    // 检索设备
    if(state.sensor_id && proxy.isNull(state.datetime)){
      state.query.p = [publicStore.distributId, state.sensor_id]
      state.query.i = 8
    }
    // 检索时间段
    if(!state.sensor_id && !proxy.isNull(state.datetime)){
      let start = Date.parse(state.datetime[0]) + ''
      let end = Date.parse(state.datetime[1]) + ''
      state.query.p = [publicStore.distributId, state.form.type, start, end]
      state.query.i = 17
    }
    // 传感器 + 时间段
    if(state.sensor_id && !proxy.isNull(state.datetime)){
      let start = Date.parse(state.datetime[0]) + ''
      let end = Date.parse(state.datetime[1]) + ''
      state.query.p = [state.sensor_id, start, end]
      state.query.i = 10
    }
  }

  // 暴露
  defineExpose({
    onVisable
  })
</script>

<style scoped lang="scss">
  :deep(input:-webkit-autofill) {
    -webkit-text-fill-color: #f5f5f5;
  }
</style>